import { Image, Text, View } from "@tarojs/components";
import Taro from "@tarojs/taro";
import React, { Fragment } from "react";
import cls from "classnames";
import { durationFormat } from "@src/utils";
import { addMediaChoosed } from "@src/store/globalData";

import "./mediaItem.scss";
import store from "@src/store";

type MediaItemProps = {
    item: any;
    itemStyle: {
        w: number;
        h: number;
        padding: number;
    };
    onPreview?: Function;
    choosed?: boolean;
    chooseIndex?: number;
    canChoosed?: boolean
};

export default class MediaItem extends React.PureComponent<MediaItemProps> {
    handleClickTakePhoto() {
        Taro.navigateTo({
            url: "/pages/cameraPage/index"
        });
    }

    handleChooseImage() {
        const mediaType = this.props.item.node.image.playableDuration > 0 ? "video" : "image";
        store.dispatch(addMediaChoosed({ uri: this.props.item.node.image.uri, type: mediaType }));
    }

    render() {
        const { item, itemStyle, choosed = false, canChoosed = true } = this.props;
        const isVideo = !!item.node.image.playableDuration;
        return (
            <Fragment>
                {item.takePhoto ? (
                    <View
                      style={{
                            width: itemStyle.w,
                            height: itemStyle.h,
                            display: "flex",
                            alignItems: "center",
                            justifyContent: "center"
                        }}
                      onClick={this.handleClickTakePhoto}
                    >
                        <Text className="ionicons mediaItem__openCameraBtn">
                            {"\uf1bb"}
                        </Text>
                    </View>
                ) : (
                    <View
                      className="mediaItem"
                      style={{
                            width: itemStyle.w,
                            height: itemStyle.h,
                        }}
                      onClick={() => {
                            this.props.onPreview?.(isVideo);
                        }}
                    >
                        {!canChoosed ? <View className="mediaItem__mask" onClick={() => { }} /> : null}
                        <Image
                          className="mediaItem__image"
                          src={item.node.image.uri}
                          mode="aspectFill"
                        />
                        {item.node.image.playableDuration ? (
                            <Fragment>
                                <View className="mediaItem__videoDuration">
                                    {durationFormat(item.node.image.playableDuration)}
                                </View>
                                <View
                                  className={cls(
                                        "mediaItem__chooseIcon",
                                        choosed ? "mediaItem__chooseIcon--actived" : ""
                                    )}
                                  onClick={this.handleChooseImage.bind(this)}
                                />
                            </Fragment>
                        ) : (
                            <View
                              className={cls(
                                    "mediaItem__chooseIcon",
                                    choosed ? "mediaItem__chooseIcon--actived" : ""
                                )}
                              onClick={this.handleChooseImage.bind(this)}
                            />
                        )}
                    </View>
                )}
            </Fragment>
        );
    }
}
